<template>
  <div class="cutPriceDetail" v-if='goodData'>
    <x-header title="砍价详情" :left-options="{backText:''}" class="whiteHeader"></x-header>
    <!--分享提示弹窗,已封装成组件-->
    <shareToast :share='showShare' @close-share='closeShare'></shareToast>
    <!--背景-->
    <div class="mask" v-show="showBg" @click="exchangeBg"></div>
    <!--砍价发起者-->
    <div class="cutpSource">
      <img :src='goodData.SPICT_USERS_PATH' alt="" />
      <div>
        <span>由{{username|fiterPhone}}发起的砍价</span>
        <span>{{timeStart}}</span>
      </div>
    </div>
    <!--车品信息-->
    <div class="carProductInfo" @click="toGoodDetail">
      <div class="carProductInfoL">
        <img :src='goodData.SERV_DETAIL_PHOTO' alt="" />
      </div>
      <div class="carProductInfoR">
        <div class="carProductName">
          {{goodData.SERV_DETAIL_NAME}}
        </div>
        <!--根据砍价状态显示-->
        <div class="carProductSum">
          <em v-if='status==5'>最低砍购价:￥{{goodData.END_PRICE}}</em>
          <span v-if="status==1||status==2||status==5||status==6">库存:&nbsp;{{goodData.STOCK}}件</span>
          <span v-if="status==3||status==4">参与人数:{{goodData.SALE_NUM}}人</span>
        </div>
        <div class="carProductPrice">
          <span>￥<em>{{newmoney}}</em>
          </span>
          <span>原价&thinsp;￥{{Number(goodData.START_PRICE).toFixed(2)}}</span>
        </div>
      </div>
    </div>
    <!--砍价状态-->
    <div class="cutpStatus">
      <div class="cutpStatus1" v-if="status==1">
        <span class="endPrice">目标可砍至￥{{ goodData.END_PRICE }}</span>
        <h5 style="margin-top: .22rem;">距结束&nbsp;
          <span>{{downObj.day}}天 {{downObj.H}} : {{downObj.M}} : {{downObj.S}}</span>
        </h5>
        <p class="btn" @click="findHelper">找人帮砍</p>
        <p class="btn" @click="toPay()">￥{{Number(goodData.NOW_PRICE).toFixed(2)}} &nbsp;购买</p>
      </div>
      <div class="cutpStatus1" v-if="status==2">
        <span class="endPrice" v-if="!toHelperBol">目标可砍至￥{{ goodData.END_PRICE }}</span>
        <template v-if="!toHelperBol">
          <h5 style="margin-top: .22rem;">距结束&nbsp;
            <span>{{downObj.day}}天{{downObj.H}} : {{downObj.M}} : {{downObj.S}}</span>
          </h5>
        </template>
        <template v-else>
          <h5>距结束&nbsp;
            <span>{{downObj.day}}天{{downObj.H}} : {{downObj.M}} : {{downObj.S}}</span>
          </h5>
        </template>
        <p class="btn" @click="toHelper" v-if="!toHelperBol">帮砍一刀</p>
        <p class="btn gray noHelp" v-if="toHelperBol">已帮砍￥{{tocutmoney1|keepTwoDot}}</p>
        <p class="btn" @click="toGoodDetail">发起砍价</p>
      </div>
      <div class="cutpStatus1" v-if="status==3">
        <p class="btn gray noUse">本次砍价已失效</p>
      </div>
      <div class="cutpStatus1" v-if="status==4">
        <p class="btn success" @click="toOrderDetail">本次砍价已成功下单</p>
      </div>
      <div class="cutpStatus1" v-if="status==5">
        <h5>距结束&nbsp;
          <span>{{downObj.day}}天{{downObj.H}} : {{downObj.M}} : {{downObj.S}}</span>
        </h5>
        <p class="btn lowest" @click="toPay()">最低砍购价￥{{Number(goodData.END_PRICE).toFixed(2)}}购买</p>
      </div>
      <div class="cutpStatus1" v-if="status==6">
        <h5>距结束&nbsp;
          <span>{{downObj.day}}天{{downObj.H}} : {{downObj.M}} : {{downObj.S}}</span>
        </h5>
        <p class="btn gray noHelp">已经不需要你帮忙了</p>
        <p class="btn" @click="toGoodDetail">发起砍价</p>
      </div>
    </div>
    <div class="cutpBlank"></div>
    <!--砍价动态-->
    <div class="cutpProcess" v-show="allData.length!=0&&allData!=''">
      <div class="cupProcessTitle">
        <img src="../../assets/image/cutPrice/cutpState.png" alt="" />
        <span>已有{{allData.length}}位好友帮忙砍价</span>
      </div>
      <div class="processDetail">
        <timeline>
          <timeline-item v-for="(item,index) in allData" :key="index">
            <p class="cutpTime">{{bargainTime(item.BARGAIN_TIME)}}</p>
            <div class="cutPriceFriends">
              <img src="../../assets/image/cutPrice/tongzai.png" alt="" v-if="item.USER_NAME=='通仔'">
              <img :src="item.SPICT_USERS_PATH" alt="" v-else/>
              <div class="cutPriceFriend">
                <p>{{item.USER_NAME|fiterPhone}}帮忙砍价</p>
                <p>
                  <template>
                    <span v-if="index==0">{{item.REMARK}}</span>
                    <span v-else-if="item.REMARK==''&&index!=0&&item.REMARK_STATUS==0">小伙伴来啦~</span>
                    <span v-else-if= "item.REMARK!=''&&index!=0&&item.REMARK_STATUS==0">{{item.REMARK}}</span>
                    <span v-else-if="item.REMARK==''&&item.REMARK_STATUS==1" style="color:#FA4040;font-size:.2rem;" @click="goMsg(item.BARGAIN_USER_ID)">点击留言有奖哦</span>
                  </template>
                </p>
              </div>
              <p class="cutpPrices">￥{{Number(item.USER_PRICE).toFixed(2)}}</p>
            </div>
          </timeline-item>
        </timeline>
      </div>
    </div>
    <div class="cutpBlank"></div>
    <!-- 砍价弹出窗口 -->
    <div class="cutwicket" v-show="cutWicketbol">
      <div class="cutBg">
        <div class="cutBgPng"><img src="../../assets/image/cutPrice/tanchuangbg.png" alt=""></div>
        <div class="cutBgGif">
          <img src="../../assets/image/cutPrice/tanchuang2.gif" alt="">
          <p>成功为好友砍价<span>{{tocutmoney1|keepTwoDot}}</span><span>元</span></p>
        </div>
        <div class="cutBgButton"><img src="../../assets/image/cutPrice/close.png" alt="" @click="toClose"></div>
      </div>
    </div>
    <!--更多砍价商品-->
    <div class="carPro" v-if="moreCutpData&&moreCutpData.length!=0">
      <h1>
        <img src="../../assets/image/cutPrice/moreCutp2.png" alt="" />
      </h1>
      <div class="allProduct">
        <div class="listItem productBorder" v-for='(item,index) in moreCutpData' :key="index" @click='goShopDetail(item.SERVDETAIL_ID)'>
          <img :src="item.SERV_DETAIL_PHOTO" alt=""/>
          <p>{{item.REMARK}}</p>
          <h2>{{item.SERV_DETAIL_NAME}}</h2>
          <div class="price">
            <span>最低砍购价￥{{Number(item.END_PRICE).toFixed(2)}}</span>
            <span>￥{{Number(item.START_PRICE).toFixed(2)}}</span>
          </div>
        </div>
      </div>
    </div>
    <!--留言有奖-->
    <div class="cutpMessage" v-show="showMsg">
      <popup v-model="showMsg" position="bottom">
        <div class="allMsg">
          <div class="popupText">
            <p @click="cancelMsg">取消</p>
            <p @click="sendMsg">留言</p>
          </div>
          <textarea id="selectText" v-model="msgContent" @click="select" autofocus placeholder="你最多可以输入20个字哦~">
          </textarea>
        </div>
      </popup>
    </div>
    <!-- 留言有奖弹窗 -->
    <div class="cutpLotteryWin" v-show="showcutpMessage">
      <div class="lotteryMain">
        <div class="lotteryMains">
          <div class="lotteryMainsimga"><img src="../../assets/image/cutPrice/youprize.png" alt=""></div>
          <div class="lotteryMainsimgb">
            <img src="../../assets/image/cutPrice/youlottery2.png" alt="">
            <p>￥<span>{{cutpMessage.AMOUNT}}</span></p>
          </div>
          <div class="lotteryMainsimgc">
            <p>获得一张<span>{{cutpMessage.AMOUNT}}</span>元{{cutpMessage.SUBJECT}}</p>
            <p>券已放入您的账户中,可在“我的-我的券包”中查看</p>
          </div>
          <div class="lotteryMainsimgd">
            <p @click="toshowcutpMessage">我知道了</p>
            <p @click="toUsecutpMessage">立即使用</p>
          </div>
        </div>
        <div class="cutpMessageClose" @click="toshowcutpMessage">
          <img src="../../assets/image/cutPrice/close.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/*砍价详情*/
import { XHeader, Timeline, TimelineItem, Popup } from "vux";
import { setCookie, getCookie, reloads, appid, iosAdroidWx,isWeiXin,wXAuthJump,sendWXCodeOrOpenid,GetQueryString,clearCookie } from "../../util/commonUtils";
import shareToast from "../../components/shareToast.vue"; //分享弹窗组件
import wx from 'weixin-js-sdk'//微信jssdk
export default {
  name: "cutPriceDetail",
  // 数据
  data() {
    return {
      userState:"",
      userId: "",
      username: "",
      userimgs: "",
      allData:[], //砍价动态数据
      moreCutpData: "", //更多砍价商品数据
      status: 1, //砍价状态
      //1-砍价中,发起方 2-砍价中,帮砍方 3-已失效 4-已下单 5-已砍至低价,发起方 6-帮砍方(帮助过)
      showShare: false, //分享弹框
      showBg: false, //背景
      showMsg: false, //留言
      msgContent: "", //评论内容
      cartPrice: 0,
      orderId: "", //订单id
      servdetailid: "",//商品id
      cutbg: false, //砍价的弹窗,
      goodData: "", // 获取砍价商品的详情数据
      createTime: "", //订单创建时间
      endTime: "", //订单结束事件
      closeTime: "", // 砍价结束时间
      downObj:{
          day:0,
          H:0,
          M:0,
          S:0
      },
      cutWicketbol: false, // 砍价弹窗
      iswx: false, //是否为微信接口
      unionidpo: "",// 微信unionid
      nickname: "",// 微信name
      tocutmoney: 0, // 帮砍的价格
      tocutmoney1: 0,
      toHelperBol:false,
      bargainUserid: "", //留言人id
      goMsgBol: false, //帮砍后可留言
      orderList: "",
      showcutpMessage: false, // 留言弹窗
      cutpMessage:"", // 代金券
      isInCut: false // 是否正在发起砍价请求中
    }
  },
  // 计算属性
  computed: {
    // 订单创建时间
    timeStart () {
      return this.computerTime(this.createTime);
   },
    // 帮砍后的价格
    newmoney() {
      if(this.goodData.USER_BARGAIN_PRICE){
        return (Number(this.goodData.NOW_PRICE)).toFixed(2);
      }else{
        return (Number(this.goodData.NOW_PRICE) - this.tocutmoney1).toFixed(2);
      }
    }
  },
  // 创建（实例创建完成）
  created() {
    if(sessionStorage.getItem('reload')){
      sessionStorage.removeItem('reload');
    }else{
      sessionStorage.setItem('reload',1);
      reloads();
      return;
    }
    this.userId = getCookie('loginkey');
    this.orderId = this.$route.params.id;
    this.isiosRefresh()
    this.getstate();
  },
  // el被创建，并挂载到实例上
  mounted() {},
  // 方法（实例中的方法）-----------
  methods: {
    // ios不刷新
    isiosRefresh(){
      var isPageHide = false;
      window.addEventListener('pageshow', function () {
        if (isPageHide) {
          window.location.reload();
        }
      });
      window.addEventListener('pagehide', function () {
        isPageHide = true;
      })
    },
    // 授权
    getstate () {
      let code = GetQueryString('code');
      let unionid=getCookie('_unionidpo_');
      let orderid = this.$route.params.id;
      if(isWeiXin()){
        let that=this;
        this.iswx = true
        // 1.是微信环境下
        // 不存在openid 检查是否有code参数
        if ( code || unionid) {
          sendWXCodeOrOpenid.call(that).then(function (data) {
            // 储存code拉回的openid
            console.log(data)
            if ( data.STATUS_CODE == 1) {
              //获取用户微信信息 openCut
              setCookie('_unionidpo_', data.AUTH_INFO.unionid);//用户的unionid
              that.unionid = data.AUTH_INFO.unionid;
              setCookie("headerImg",data.AUTH_INFO.headimgurl);
              setCookie("userN",data.AUTH_INFO.nickname);
              that.nickname = data.AUTH_INFO.nickname
              sessionStorage.removeItem('cutPrice');
              if(data.IS_BINDING==0){
                that.$router.push('/modifyGroup');
              }else if(data.USER_ID){
                setCookie("userName",data.MOBILE);
                setCookie("loginkey",data.USER_ID);
                setCookie('CAR_ID',data.CAR_ID);
                setCookie('INV_CODE',data.INV_CODE);
                setCookie('INV_URL',data.INV_URL);
                that.userId=data.USER_ID;
                that.getOrderDetail();
              }
            }else if(data.STATUS_CODE == 2){
              clearCookie('_unionidpo_');
              let urls=window.getIps+'/CARNT/jsp/pay/indexM.html#/cutPriceDetail/'+orderid;
              wXAuthJump.call(that,urls);
            }
          })
        }
        // 不存在code也无openid
        else {
          // 跳转微信授权地址 （之后再跳回页面，流程重头来过）
          let urls=window.getIps+'/CARNT/jsp/pay/indexM.html#/cutPriceDetail/'+orderid;
          wXAuthJump.call(that,urls);
        }
      }else{
        this.iswx = false;
        this.getOrderDetail();
     }
    },
    // 获取砍价商品的详情
    getOrderDetail() {
      this.$fetchPost("/Bargain/gerBargainOrderDetail.action", {
        USER_ID: this.userId,
        ORDER_ID: this.orderId
      }).then(
        res => {
          this.goodData = res;
          this.getConfig()
          this.userState = res.USER_STATUS;
          this.allData = res.BARGAIN_USER_LIST;
          this.moreCutpData = res.GUESS_LIKE;
          this.endTime = res.CLOST_TIME;
          this.username = res.USER_NAME;
          this.createTime = res.CREATE_TIME;
          this.servdetailid = res.SERVDETAIL_ID;
          //判断整个页面的状态  1-砍价中,发起方 2-砍价中,帮砍方 3-已失效 4-已下单 5-已砍至低价,发起方 6-帮砍方(帮助过)
          //BARGAGIN_STATUS = 0 : 失败 时间过时 1：成功 支付2进行中
          if(res.BARGAIN_SATUS !=0){
            if(res.USER_STATUS ==0){ // 帮砍人
              if(Number(res.NOW_PRICE)>Number(res.END_PRICE)){
                this.status = 2 // 帮砍人没有砍价
              }else{
                this.status = 6 // 帮砍人没有砍价,但是已经是最低价
              }
            }else if(res.USER_STATUS==2){// 帮砍人 已帮砍
              this.tocutmoney1 = res.USER_BARGAIN_PRICE;
              if(Number(res.NOW_PRICE)>Number(res.END_PRICE)){//但是还不是最低价
                this.toHelperBol = true;
                this.status = 2;
              }else{
                this.status = 6;  // 帮砍人 已帮砍  是最低价
              }
              // this.status = 6 // 帮砍人 已帮砍  ///但是还不是最低价
                                      // 帮砍人 已帮砍  是最低价
            }else if(res.USER_STATUS==1){ //自己进来
              if(res.BARGAIN_SATUS ==1){// 用户已成功支付
                    this.status = 4
              }else if(res.BARGAIN_SATUS==2){// 订单进行中
                if(Number(res.NOW_PRICE) > Number(res.END_PRICE)){
                    this.status = 1
                  }else{
                    this.status = 5
                  }
              }
            }
          }else{// 订单已失效
            this.status = 3
          }
          // 查询结束时间
          this.closeTime = setInterval( ()=> {
            this.checkShop(this.createTime, this.endTime)
          },500);
        },
        err => console.log(err)
      );
    },
    //找人帮砍
    findHelper() {
      this.showShare = true;
    },
    //关闭分享
    closeShare() {
      this.showShare = false;
    },
    //切换背景
    exchangeBg() {
      this.showBg = false;
    },
    //取消
    cancelMsg() {
      this.showMsg = false;
    },
    // 去留言 判断一下
    goMsg(id) {
      if(id){
        this.bargainUserid = id
      }
      this.showMsg = true;
      document.getElementById("selectText").click();
    },
    // 留言
    sendMsg() {
      this.showMsg = false;
      let allData = this.allData
      if(this.msgContent =='') {
        this.$vux.alert.show({
          title:'提示',
          content:'留言不能为空!'
        })
      }else if(this.msgContent.length>20){
        this.$vux.alert.show({
          title:'提示',
          content:'留言内容不能超过20字!'
        })
      }else{
        // for(let i = 0; i < this.allData.length; i++){
        //   if(this.allData[i].BARGAIN_USER_ID == this.bargainUserid){
        //     this.$set(this.allData[i],'REMARK',"")
        //   }
        // }
        // console.log(JSON.stringify(this.allData));
        // return;
        this.$fetchPost("/Bargain/userCommentBargain.action", {
          BARGAIN_USER_ID: this.bargainUserid,
          REMARK:this.msgContent
        }).then(res => {
            // 发送留言返回中奖卷BARGAIN_USER_ID
            this.cutpMessage = res;
            this.showcutpMessage = true;
            let bargainUserid = this.bargainUserid;
            let msgContent = this.msgContent;
            for(let i = 0; i < allData.length ; i++){
              if(allData[i].BARGAIN_USER_ID == bargainUserid){
                allData[i].REMARK = msgContent;
                allData[i].REMARK_STATUS = 0;
                return;
              }
            }
            this.allData = allData;
            this.msgContent="";
          },
          err => console.log(err)
        );
      }
    },
    //选中textarea
    select() {
      this.showMsg = true;
    },
    // 判断是否登录
    islogin () {
      let that=this;
      if(!getCookie('loginkey')){//判断是否登录
        this.$vux.confirm.show({
          title:'提示',
          content:'请先登录',
          onConfirm () {
            that.$router.push('/login');
          }
        })
      }
    },
    // 去帮助砍价 判断是否砍到最低
    toHelper() {
      if(!isWeiXin()){
        this.islogin();
      }
      this.getChopperDetail();// 获取到帮砍多少钱
    },
     // 获取砍价商品的价格 帮助者
    getChopperDetail() {
      // 判断是否在微信端
      let obj = {}
      if(this.iswx) {
        // 是微信
        obj.USER_ID = this.userId;
        obj.ORDER_ID = this.orderId;
        obj.UNIONID = this.unionid;
        obj.NICK_NAME = this.nickname;
        obj.REMARK = ''
      } else {
        // 非微信 但是登录过
        obj.USER_ID = this.userId;
        obj.ORDER_ID = this.orderId;
        obj.REMARK = '';
      }
      // 如果正在发起砍价请求 返回
      if (this.isInCut) {
        return
      }
      this.isInCut = true
      this.$fetchPost("/Bargain/chopper.action", obj).then(
        res => {
          // 接口返回 将 是否正在请求设置false
          this.isInCut = false
          if(res.STATUS_CODE==1){
            this.toHelperBol = true;
            this.tocutmoney1 = res.MONEY;
            this.cutWicketbol = true;
            this.bargainUserid = res.BARGAIN_USER_ID;
            // this.status = 6;
            this.goMsgBol = true;
            // 动态添加数据可去留言
            let objs = {}
            objs.BARGAIN_USER_ID = res.BARGAIN_USER_ID;
            objs.USER_NAME = res.BARGAIN_USER_NAME;
            objs.BARGAIN_TIME = new Date().getTime();
            objs.REMARK = "";
            objs.REMARK_STATUS = 1;
            objs.USER_PRICE = res.MONEY;
            objs.SPICT_USERS_PATH = res.SPATH;
            this.allData.push(objs);
          }
        },
        err => {
          console.log(err)
          this.isInCut = false
        }
      );
    },
    bargainTime (time) {
      return this.computerTime(time)
    },
    // 计算时间戳返回格式的时间
    computerTime (times) {
      let time = new Date(times);
      let timeH = time.getHours()
      let timeM = time.getMinutes()
      if(timeH<10){
        timeH = timeH>=10?timeH:'0'+timeH
      }
      if(timeM<10){
        timeM = timeM>=10?timeM:'0'+timeM
      }
      return (time.getMonth()+1)+'-'+time.getDate()+" "+timeH+":"+timeM;
    },
     //轮询计算砍价结束时间
    checkShop(startTime,endTime){
        var times=new Date().getTime();
        let day=0;
        let H=0;
        let M=0;
        let S=0;
        if(times>=endTime){
          if(this.status==4){
            return;
          }else{
            this.status=3
          }
          this.$vux.alert.show({
              title: '',
              content: '活动已经结束了'
          })
          clearInterval(this.closeTime);
        }else{
          day=parseInt((endTime-times)/(24*60*60*1000));
          H=parseInt((endTime-times-day*24*60*60*1000)/(60*60*1000));
          M=parseInt((endTime-times-day*24*60*60*1000-H*60*60*1000)/(60*1000));
          S=parseInt((endTime-times-day*24*60*60*1000-H*60*60*1000-M*60*1000)/(1000));
          H=this.filterNum(H);
          M=this.filterNum(M);
          S=this.filterNum(S);
        }
        this.downObj={
          day:day,
          H:H,
          M:M,
          S:S
        }

    },
    filterNum(num){
      return num>=10?num:'0'+num;
    },
    toClose () {
      this.cutWicketbol = false
    },
    //获取微信的配置信息
    getConfig(){
      let goodData = this.goodData
      let timestamp,nonceStr,signature;
      let desc='爱我，就给我来一刀!';
      let title='严选汽车用品砍价' + '【'+goodData.SERV_DETAIL_NAME+'】';
      let imgUrl=goodData.SERV_DETAIL_PHOTO;
      let urls=iosAdroidWx().urls;
      let appid=iosAdroidWx().appid;
      this.$fetchPost(urls,{'url' : window.location.href},{emulateJSON:true})
      .then(res=>{
        var data = res;
        // timestamp = data.timestamp;
        // nonceStr =  data.nonceStr;
        // signature = data.signature;
        timestamp=data.NOW_TIME;
        nonceStr=data.NONCESTR;
        signature=data.SKEY;
        // console.log(timestamp,nonceStr,signature,appId)
        wx.config({
            debug : false, // 开启调试模式,false调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId :appid, // 必填，公众号的唯一标识
            timestamp : timestamp, // 必填，生成签名的时间戳
            nonceStr : nonceStr, // 必填，生成签名的随机串
            signature : signature,// 必填，签名，见附录1
            jsApiList : [ 'onMenuShareTimeline', 'onMenuShareAppMessage','chooseWXPay', 'showOptionMenu' ]
        });
        let that=this;
        let linkUrl=location.href;
        wx.ready(function(){
          // 分享给朋友
          wx.onMenuShareAppMessage({
            title: title,
            desc: desc,
            link: linkUrl,
            imgUrl: imgUrl,
            trigger: function (res) {
            },
            success: function (res) {
            },
            cancel: function (res) {
            },
            fail: function (res) {
              alert(JSON.stringify(res));
            }
          });

          //分享朋友圈
          wx.onMenuShareTimeline({
            title: title,
            desc: desc,
            link: linkUrl,
            imgUrl: imgUrl,
            trigger: function (res) {
            },
            success: function (res) {
            },
            cancel: function (res) {
            },
            fail: function (res) {
              alert(JSON.stringify(res));
            }
          });
        })
      },err=>{

      });
    },
    // 封装支付数据
    getPay(){
      if(this.orderList != ""){
        // 修改2个字段
        let obj = {};
        obj.COMP_ID = this.orderList.COMP_ID
        obj.SHOP_NAME = this.orderList.SHOP_NAME
        obj.SERV_PARAMS= []
        let objs= {}
        objs.SERV_ID = this.orderList.SERV_PARAMS[0].SERV_ID;
        objs.QUANTITY = this.orderList.SERV_PARAMS[0].QUANTITY;
        objs.SERV_FIRST_CLASS = this.orderList.SERV_PARAMS[0].SERV_FIRST_CLASS;
        objs.SERV_SECON_CLASS = this.orderList.SERV_PARAMS[0].SERV_SECON_CLASS;
        objs.SUPP_CASH_VOL = this.orderList.SERV_PARAMS[0].SUPP_CASH_VOL;
        objs.SUPP_DIS_VOL = this.orderList.SERV_PARAMS[0].SUPP_DIS_VOL;
        objs.SUPP_NOR_CASH_VOL = this.orderList.SERV_PARAMS[0].SUPP_NOR_CASH_VOL;
        objs.SERV_SUBJECT = this.orderList.SERV_PARAMS[0].SERV_SUBJECT;
        objs.PRICE = this.orderList.PRICE;
        objs.MARK =this.orderList.SERV_PARAMS[0].MARK;
        objs.ATTR_LIST = [];
        if(this.orderList.SERV_PARAMS[0].ATTR_LIST){
          for(let i=0;i<this.orderList.SERV_PARAMS[0].ATTR_LIST.length;i++){
          let objss={};
          objss.ATTRIBURE=String(this.orderList.SERV_PARAMS[0].ATTR_LIST[i].ATTRIBURE);
          objss.TYPE=this.orderList.SERV_PARAMS[0].ATTR_LIST[i].TYPE;
          objs.ATTR_LIST.push(objss);
          }
        }
        obj.SERV_PARAMS.push(objs)
        let cutGoodObj = {}
        cutGoodObj.USER_ID = this.userId;
        if(this.orderId){
            cutGoodObj.ORDER_ID=this.orderId;//支付需要的orderId
        }
        cutGoodObj.ORDER_LIST = [];
        cutGoodObj.ORDER_LIST.push(obj);
        sessionStorage.removeItem('orderMess');
        sessionStorage.removeItem('distribuVoucher');
        localStorage.removeItem('from');
        sessionStorage.setItem('shopMess',JSON.stringify(cutGoodObj));//商品支付的数据
        // this.$router.push('/shopPay');
        location.href=window.getIps+'/CARNT/jsp/pay/indexM.html#/shopPay';
      }
    },
    // 去支付
    toPay() { // 获取砍价的支付信息 TYPE传1
      this.getOrderDetail()
      this.$fetchPost("/ServOrderWeb/confirmOrderInfo.action", {
        ORDER_ID:this.orderId,
        TYPE:1
      }).then(
        res => {
          // console.log(res)
          if(res.STATUS_CODE ==1) {
            this.orderList = res.ORDER_LIST[0]
            this.getPay()
          }
        },
        err => console.log(err)
      );
    },
    // 跳转去更多商品详情
    goShopDetail(id) {
      this.$router.push('/shopDetail/'+id);
    },
    // 关闭留言中奖弹窗
    toshowcutpMessage(){
      this.showcutpMessage = false;
    },
    // 使用留言优惠券
    toUsecutpMessage(){
      // // this.cutpMessage.CATEGORY 跳转连接
      this.$router.push('/ticket');
    },
    toGoodDetail(){// 去商品详情页
      this.$router.push('/shopDetail/'+this.servdetailid )
    },
    toOrderDetail(){
      if(this.goodData.SERV_ORDER_ID != 0){
        this.$router.push('/orderDetail/'+this.goodData.SERV_ORDER_ID)
      }
    }

  },
  // 子组件
  components: {
    XHeader,
    Timeline,
    TimelineItem,
    shareToast,
    Popup
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url("../../assets/css/public.less");
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
outline: none;
}
.cutPriceDetail {
  min-height: 100%;
  background: #fff;
  padding-bottom: 0.4rem;
  .carPro{
    background: #fff;
    margin-bottom: 0.17rem;
    h1{
      height: 0.8rem;
      line-height: 0.8rem;
      display: flex;
      align-items:center;
      justify-content: center;
      padding-left: 0.2rem;
      img{
        display: block;
        width: 3rem;
        height: 0.347rem;
      }
    }
    .allProduct{
      display: flex;
      justify-between:space-around;
      flex-wrap:wrap;
      .listItem{
          padding: 0rem 0 0.6rem 0;
          margin: 0 0.1rem 0.1rem 0.175rem;
          box-sizing: border-box;
          img{
          width: 3.5rem;
          height: 3rem;
          background: #f7f7f7;
          display: block;
          }
          h2{
          width: 3.5rem;
          margin-top: 0.2rem;
          font-size: 0.26rem;
          line-height: 0.35rem;
          padding:0.15rem;
          color: #222;
          overflow : hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          }
          p{
          font-size: 0.22rem;
          z-index: 2;
          height: 0.5rem;
          line-height: 0.5rem;
          position:relative;
          width: 3.46rem;
          margin: 0 auto;
          background: #f7f7f7;
          color: #EC2121;
          }
          .price{
            width: 3.5rem;
            position: absolute;
            bottom: 0.1rem;
            display: flex;
            justify-content:space-between;
            align-items:flex-end;
            padding: 0.15rem 0.15rem 0.05rem 0.15rem;
            span:nth-of-type(1){
              font-size: 0.22rem;
              color:#e84632;
              // padding-right: 0.15rem;
              font-weight: bolder;
            }
            span:nth-of-type(2){
              font-size: 0.22rem;
              color: #888;
              text-decoration: line-through;
            }
          }
      }
      .listItem:nth-child(2n){
        padding: 0rem 0rem 0.1rem 0;
        margin: 0 0.175rem 0.1rem 0;
      }
    }
  }
  /*边框一像素*/
  .productBorder{
    position:relative;
  }
  .productBorder::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    transform:scale(0.5,0.5);
    transform-origin:0 0;
    border: 1px solid #e1e2df;
  }
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
  }
  .cutpSource {
    height: 0.7rem;
    display: flex;
    align-items: center;
    box-sizing: content-box;
    padding: 0.19rem 0.2rem 0.08rem 0.33rem;
    // justify-content: space-between;
    img {
      width: 0.7rem;
      height: 0.7rem;
      border-radius: 50%;
    }
    /*特别注意nth-of-type和nth-child的区别，以后的后代选择器推荐使用nth-of-type*/
    div{
      flex-grow: 1;
      display: flex;
      justify-content: space-between;
      span:nth-of-type(1) {
      /*span:nth-child(2)*/
      font-size: 0.28rem;
      color: #333;
      margin-left: 0.15rem;
      white-space: nowrap;
    }
    span:nth-of-type(2) {
      /*span:nth-child(3)*/
      font-size: 0.26rem;
      color: #888;
      margin-right: 0.2rem;
      white-space: nowrap;
      }
    }
  }
  .carProductInfo {
    width: 7.1rem;
    height: 2.8rem;
    margin: 0 auto;
    border-radius: 0.2rem;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.05),
      -2px -2px 15px rgba(0, 0, 0, 0.05), 2px -2px 15px rgba(0, 0, 0, 0.05),
      -2px 2px 15px rgba(0, 0, 0, 0.05);
    background: rgba(0, 0, 0, 0.1) url(../../assets/image/group/groupDetail.png)
      no-repeat;
    background-size: 7.1rem 2.8rem;
    display: flex;
    .carProductInfoL {
      width: 2.3rem;
      height: 2.3rem;
      margin: 0.25rem;
      img {
        width: 1.94rem;
        height: 1.94rem;
        margin: 0.18rem;
      }
    }
    .carProductInfoR {
      text-align: left;
      .carProductName {
        font-size: 0.32rem;
        color: #222;
        margin-top: 0.36rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      .carProductSum {
        display: flex;
        margin-top: 0.11rem;
        font-size: 0.26rem;
        color: #888;
        em {
          font-style: normal;
          margin-right: 0.21rem;
        }
      }
      .carProductPrice {
        // display: flex;
        // align-items: center;
        // margin-top: 0.55rem;
        span:nth-of-type(1) {
          font-size: 0.38rem;
          color: #f22e2e;
          em {
            font-size: 0.42rem;
            font-style: normal;
          }
        }
        span:nth-of-type(2) {
          font-size: 0.26rem;
          color: #999;
          margin-left: 0.3rem;
        }
      }
    }
  }
  .cutpStatus {
    .cutpStatus1 {
      .endPrice{
        font-size: 0.30rem;
        color: #f22e2e;
      }
      h5 {
        font-size: 0.32rem;
        color: #666;
        font-weight: normal;
        margin-top: 0.65rem;
        span {
          color: #000;
        }
      }
      .btn {
        width: 5.2rem;
        height: 0.7rem;
        border-radius: 0.35rem;
        line-height: 0.7rem;
        font-size: 0.3rem;
        margin: 0 auto;
      }
      p:nth-of-type(1) {
        background: #f22e2e;
        color: #fff;
        margin-top: 0.54rem;
      }
      p:nth-of-type(2) {
        border: 1px solid #f22e2e;
        color: #f22e2e;
        margin-top: 0.2rem;
        margin-bottom: 0.21rem;
      }
      .gray {
        background: #e5e5e5 !important;
        color: #999 !important;
      }
      .noUse {
        margin-top: 0.85rem !important;
        margin-bottom: 0.76rem !important;
      }
      .success {
        border: 1px solid #f22e2e;
        color: #f22e2e !important;
        background: #fff !important;
        margin-top: 0.85rem !important;
        margin-bottom: 0.76rem !important;
      }
      .lowest {
        background: #f22e2e !important;
        color: #fff !important;
        margin-top: 0.85rem !important;
        margin-bottom: 0.76rem !important;
      }
      .noHelp {
        margin-top: 0.54rem !important;
        margin-bottom: 0.2rem !important;
      }
    }
  }
  .cutpBlank {
    height: 0.2rem;
    background: #f5f5f5;
  }
  .cutwicket{
    width: 100%;
    height:100%;
    position: fixed;
    top: 0;
    right:0;
    z-index: 488;
    background:rgba(0,0,0,0.7);
    .cutBg {
      width: 6.73rem;
      height: 9.5rem;
      position: fixed;
      top: 1.8rem;
      right: .385rem;
      left: .385rem;
      .cutBgPng{
        width: 100%;
        height: 2.56rem;
        position: relative;
        img{
          width: 100%;
        }
      }
      .cutBgGif{
        position: absolute;
        top: 0.8rem;
        width: 100%;
        height: 2.78rem;
        img{
          width: 100%;
        }
        p{
          position: absolute;
          left: 0;
          top: 3.3rem;
          right: 0;
          margin: 0 auto;
          text-align: center;
          font-size: 0.32rem;
          color: #222222;
          span:nth-child(1){
            font-size: 0.42rem;
            color: #EC2121;
          }
          span:nth-child(2){
            color: #EC2121;
          }
        }
      }
      .cutBgButton{
        width: 1.2rem;
        height: 1.2rem;
        position: absolute;
        bottom: 0;
        left: 2.763rem;
        margin: 0 auto;
        img{
          width: .8rem;
          height: .8rem;
        }
      }
    }
  }
  .cutpProcess {
    margin-top: 0.37rem;
    padding-bottom: 0.6rem;
    .cupProcessTitle {
      display: flex;
      align-items: center;
      img {
        width: 1.35rem;
        height: 0.33rem;
        margin-left: 0.4rem;
        margin-right: 2.54rem;
      }
      span {
        font-size: 0.28rem;
        color: #333;
        text-align: left;
      }
    }
    .processDetail {
      .vux-timeline-item-content{
        padding: 0 0 0 1rem;
      }
      .cutpTime {
        font-size: 0.26rem;
        color: #666;
        text-align: left;
        margin-left: -1.5rem;
      }
      .cutPriceFriends {
        display: flex;
        // aligl-items: center;
        margin: 0.28rem 0 0.1rem -1.5rem;
        width: 6.6rem;
        position: relative;
        img {
          width: 0.7rem;
          height: 0.7rem;
          border-radius: 50%;
        }
        .cutPriceFriend {
          width: 5.7rem;
          text-align: left;
          margin-left: 0.14rem;
          p:nth-of-type(1) {
            font-size: 0.28rem;
            color: #222;
          }
          p:nth-of-type(2) {
            margin-top: 0.05rem;
            font-size: 0.2rem;
            color: #999;
            width: 4rem;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            span{
              text-overflow: ellipsis;
            }
          }
        }
        .cutpPrices {
          font-size: 0.28rem;
          color: #f22e2e;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 0.4rem;
        }
      }
    }
  }
  .cutpMessage {
    .allMsg {
      padding: 0.1rem 0 0rem;
      background: #f3f3f3;
      .popupText {
        display: flex;
        align-items: center;
        p:nth-child(1) {
          position: absolute;
          left: 0.38rem;
          top: 0.12rem;
          color: #000000;
          font-size: 0.3rem;
          padding: 0.1rem;
        }
        p:nth-child(2) {
          position: absolute;
          right: 0.38rem;
          color: #f22e2e;
          top: 0.12rem;
          font-size: 0.3rem;
          padding: 0.1rem;
        }
      }
      textarea {
        width: 95%;
        height: 78%;
        border: 0;
        margin-top: 0.8rem;
        outline: medium;
        resize: none;
        height: 1.5rem;
        padding:  0 0.1rem;
        font-size: 0.3rem;
        -webkit-touch-callout: auto;
      }
    }
  }
  .cutpLotteryWin{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right:0;
    z-index: 488;
    background:rgba(0,0,0,0.7);
    .lotteryMain{
      position: fixed;
      width: 5.70rem;
      height: 9.5rem;
      right:0.9rem;
      top: 1.8rem;
      .lotteryMains{
        width: 5.70rem;
        height: 6.20rem;
        border-radius: 0.3rem;
        background: rgba(255,255,255,0.9);
        .lotteryMainsimga{
          display: flex;
          justify-content: center;
          height: 0.84rem;
          img{
            width: 3.6rem;
            height: 0.38rem;
            margin: 0.46rem 1.05rem 0rem 1.05rem;
          }
        }
        .lotteryMainsimgb{
          display: flex;
          justify-content: center;
          height: 2.85rem;
          line-height: 2.85rem;
          text-align: center;
          position: relative;
          img{
            width: 3.90rem;
            height: 2.2rem;
            margin-top: 0.58rem;
          }
          p{
            position: absolute;
            text-align: center;
            top:0;
            left:2.3rem;
            color: #FFFFFF;
            font-size: 0.35rem;
            span{
              font-size: 0.65rem;
            }
          }
        }
        .lotteryMainsimgc{
          height: 1.5rem;
          border-bottom: 1px solid #CCCCCC;
          p:nth-of-type(1){
            font-size: 0.32rem;
            color: #000000;
            span{
              color: #EC2121;
              font-size: 0.42rem;
            }
          }
          p:nth-of-type(2){
            margin-top: 0.3rem;
            font-size: 0.22rem;
            color:#999999;
          }
        }
        .lotteryMainsimgd{
          display: flex;
          flex-direction: row;
          height: 1rem;
          color: #F22E2E;
          font-size: 0.3rem;
          p:nth-of-type(1){
            border-right: 1px solid #CCCCCC;
          }
          p{
            width: 49.5%;
            height: 1rem;
            line-height: 1rem;
          }
        }
      }
      .cutpMessageClose{
        width: 1.2rem;
        height: 1.2rem;
        position: absolute;
        bottom: 0;
        left: 2.25rem;
        margin: 0 auto;
        img{
          width: .8rem;
          height: .8rem;
        }
      }
    }
  }
}
</style>
